<template>
  <main-layout>
    <van-search
      v-model="value"
      
      shape="round"
      background="#fee44e"
      placeholder="请输入搜索物品"
    />
    <van-tabs >
      <!-- 导航 -->
      <van-tab v-for="item in typesList" :title="item.name" :key="item.id">
      </van-tab>
    </van-tabs>
    <!-- 商品列表 -->
    <div class="product-box" @scroll="scrollEvt">
      <div class="productList" v-for="p in productList" :key="p.id" @click="detailEvt(p.id)">
        <img :src="p.image" alt="" class="imgs" />
        <div class="right-box">
          <div class="name">{{ p.title }}</div>
          <div class="couponValue">{{ p.couponValue }}</div>
          <div class="price"><em>卷后价￥</em>{{ p.price }}</div>
          <button class="addBtn">加入购物车</button>
        </div>
      </div>
      <div class="loading">加载更多</div>
    </div>
  </main-layout>
</template>

<script>
import { typesApi, productApi,productListByTypeApi  } from "../../apis/homeApi";
import MainLayout from "../../components/MainLayout.vue";

export default {
  components: { MainLayout },
  data() {
    return {
      //搜索框值
      value: "",
      //导航分类
      typesList: [],
      //商品数据
      productList: [],
      //表示更多数据
      hasMore: true,
      //数据接口请求中
      loading: true,
      
    };
  },

  created() {
    //导航分类
    typesApi().then((data) => {
      if (data.code === 200) {
        let arr = data.data.list.map((it) => {
          // console.log(it)
          return it;
        });
        this.typesList = arr;
        console.log(arr);
        // debugger
      }
    });
    //商品列表
    productApi().then((data) => {
      if (data.code === 200) {
        let newArr = data.data.baokuanCommodities.list.map((item) => {
          // console.log(item)
          return item;
        });
        this.productList = newArr;
        console.log(newArr);
        // debugger
      }

      setTimeout(() => {
        this.loading = false;
      });
    });
  },

  methods: {
    scrollEvt(evt) {
      let isBot =evt.target.scrollHeight < (evt.target.scrollTop + evt.target.offsetHeight + 20)
      // debugger
      if (isBot && this.hasMore && !this.loading) {
        console.log('---------已经到底部')
        
        this.loading = true;
        this.start = 40
        //// 设置start
        this.start += 0;
        //调用获取商品接口
        this.getList();
      }
    },
    async getList() {
      let request = await productListByTypeApi(this.start);
      console.log(request);
      if (request.code === 200) {
        let _more = request.data.items.list.map((it) => {
          // console.log(it)
          return it;
        });

        // console.log(request);
        this.productList = this.productList.concat(_more);
        // console.log(this.typesList);

        this.hasMore = this.offset < Math.ceil(request.data.total / 5);
        // this.hasMore = this.
      
      }

      setTimeout(() => {
        this.loading = false;
      });
    },
      
     async detailEvt(id) {
        console.log('详情')
        this.$router.push({path:'/detail',query: {id:id}}) 

    } 
  }
}
</script>

<style lang="less" scoped>
.product-box {
  height: 700px;
  overflow: auto;
  background-color: #eaeaea;
  .productList {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px;
    background-color: hsl(0deg 0% 100% / 90%);
    .imgs {
      width: 150px;
      height: 150px;
      border-radius: 8px;
      margin-right: 10px;
    }
    .right-box {
      overflow: hidden;
      .name {
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .couponValue {
        width: 50px;
        height: 20px;
        margin: 10px 0;
        line-height: 20px;
        color: #fa585a;
        text-align: center;
        border-radius: 2px;
        box-shadow: inset 0 0 0 1px #fa585a;
      }

      .price {
        margin: 10px 0;
        font-size: 1.2rem;
        font-weight: 600;
        color: #e70012;
        > em {
          font-size: 0.8rem;
          font-weight: 400;
          font-style: normal;
        }
      }
      .addBtn {
        color: #fff;
        border: none;
        width: 100px;
        height: 35px;
        border-radius: 5px;
        background-color: rgb(250, 88, 90);
      }
    }
  }
}
// footer {
//           display: block;
//           height: 49px;
//           border-top: solid 1px #eeeeee;
//           background: #fff;
//           > .item {
//               float: left;
//               width: 25%;
//               margin-bottom: 10px;
//               > i {
//                   display: block;
//                   height: 16px;
//               }
//               > span {
//                   display: block;
//                   height: 16px;
//                   text-align: center;
//                   color: #545456;
//               }
//         }
// }
</style>